<script lang="ts" setup>
import type { ConsultRecord } from '@/types/room'

const props = defineProps<{
  info?: ConsultRecord
}>()
//患病时长
const illnessTimes = [
  { value: 1, text: '一周内' },
  { value: 2, text: '一个月内' },
  { value: 4, text: '半年内' },
  { value: 6, text: '半年以上' },
]
// 是否就诊
const consultFlags = [
  { value: 0, text: '未就诊' },
  { value: 1, text: '就诊过' },
]
// 预览图片
const handlePreviewImage =()=>{
  // 预览图片
  uni.previewImage({
     // urls: Array<String> 需要预览的图片链接列表
    urls:props.info?.pictures?.map((item)=>item.url)||[]
  })

}
</script>

<template>
  <!-- 患者信息（21） -->
  <view class="patient-info">
    <view class="header">
      <view class="title">
        {{ info?.patientInfo?.name }} {{ info?.patientInfo?.genderValue }}
        {{ info?.patientInfo?.age }}岁</view
      >
      <view class="note">
        {{ illnessTimes.find((item) => item.value === info?.illnessTime)?.text }}
        |
        {{ consultFlags.find((item) => item.value === info?.consultFlag)?.text }}</view
      >
    </view>
    <view class="content">
      <view class="list-item">
        <text class="label">病情描述</text>
        <text class="note">{{ info?.illnessDesc }}</text>
      </view>
      <view class="list-item">
        <text class="note" v-if="info?.pictures?.length" @click="handlePreviewImage">点击查看</text>
        <text class="note" v-else>暂无图片</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.patient-info {
  padding: 30rpx;
  margin-top: 60rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
  background-color: #fff;

  .header {
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #ededed;

    .title {
      font-size: 32rpx;
      color: #121826;
      margin-bottom: 10rpx;
    }

    .note {
      font-size: 26rpx;
      color: #848484;
    }
  }

  .content {
    margin-top: 20rpx;
    font-size: 26rpx;

    .list-item {
      display: flex;
      margin-top: 10rpx;
    }

    .label {
      width: 130rpx;
      color: #3c3e42;
    }

    .note {
      flex: 1;
      line-height: 1.4;
      color: #848484;
    }
  }
}
</style>
